﻿<!DOCTYPE html>

<html class="app-ui" >
<head>
    <!-- Meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" href="assets/img/favicons/favicon.ico" />
   <!-- Page JS Plugins CSS -->
    <link rel="stylesheet" href="assets/js/plugins/datatables/jquery.dataTables.min.css" />
    <!-- AppUI CSS stylesheets -->
    <link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
    <link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
    <link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
    <link rel="stylesheet" id="css-app" href="assets/css/app.css" />
    <link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
    <!--查询动作-1  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script>

</head>
<style>
    body {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }
    /* 定义表格的基本样式 */
    table {
        width: 100%; /* 表格宽度自适应容器 */
        border-collapse: collapse; /* 边框合并，避免双线 */
        margin-bottom: 20px; /* 底部留白 */
    }

    /* 设置表格边框和单元格间距 */
    th, td {
        border: 1px solid #ddd; /* 细灰色边框 */
        padding: 8px; /* 内边距 */
        text-align: left; /* 文本左对齐 */
    }

    /* 强调表头 */
    th {
        background-color: #00c0ef; /* 绿色背景 */
        color: white; /* 白色文本 */
        font-weight: bold; /* 加粗字体 */
    }

    /* 鼠标悬停时改变行颜色 */
    tr:hover {
        background-color: #f5f5f5; /* 浅灰色背景 */
    }

    /* 为奇数行添加不同颜色以提高可读性 */
    tr:nth-child(even) {
        background-color: #f9f9f9; /* 浅灰白色背景 */
    }

    /* 响应式设计：当屏幕宽度小于600px时调整布局 */
    @media screen and (max-width: 600px) {
        table, thead, tbody, th, td, tr {
            display: block;
        }

        /* 隐藏原始表头 */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr {
            margin-bottom: 15px;
        }

        td {
            /* 模拟表头 */
            &:before {
                content: attr(data-label); /* 使用data-label属性作为新表头 */
                float: left;
                font-weight: bold;
            }
        }
    }
</style>
<body  class="app-ui layout-has-drawer layout-has-fixed-header" >
<!--增加动作-1 写一个表单 -->
<div id="app" class="card-block">
    <!--增加动作-0 初始页面 -->
    <button name="" @click="create" >新增</button>
    <!--增加动作-3 调用增加方法 -->
    <button v-show="isCreate" @click="confirmCreate" >确认增加</button>
    <div v-show="isCreate" class="createNewUser card-block">
        <label for="userId">用户编号</label>
        <input id="userId"  type="text" v-model="newInfo.userId" >
        <label for="userMail">用户邮箱</label>
        <input id="userMail"  type="text" v-model="newInfo.userMail" >
        <label for="userName">用户名字</label>
        <input id="userName"  type="text" v-model="newInfo.userName" >
        <label for="userPhone">用户手机</label>
        <input id="userPhone"  type="text" v-model="newInfo.userPhone" >
    </div>
    <table class="table table-bordered table-striped table-vcenter js-dataTable-simple" >
        <thead>
        <tr>
            <th>用户编号</th>
            <th>用户邮箱</th>
            <th>用户名字</th>
            <th>用户手机</th>

            <th>操作</th>
        </tr>
        </thead>
        <tbody >
        <div class="table">
            <!--查询动作-4 info数据显示 -->
            <tr class="odd gradeX" v-for="(value,index) in info"  :key="index">
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userId"></td>
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userMail"></td>
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userName"></td>
                <td><input :class="{isedit:thisIndex===index}" class="notedit" type="text" :disabled="!(thisIndex===index)" v-model="value.userPhone"></td>
                <td class="text-center">
                    <div class="btn-group">
                        <!--修改动作-1 修改按钮事件 -->
                        <button
                                @click="thisIndex=index"
                                class="btn btn-xs btn-default"
                                type="button"
                                data-toggle="tooltip"
                                title="Edit Client">
                            修改
                        </button>
                        <!--删除动作-1 删除按钮事件   -->
                        <button
                                class="btn btn-xs btn-default"
                                type="button"
                                data-toggle="tooltip"
                                title="Remove Client"
                                @click="deleteItem(index)">
                            删除
                        </button>
                        <!--修改动作-2 保存按钮事件 -->
                        <button @click="save(index)" class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Remove Client">
                            <span>保存</span>
                        </button>
                    </div>
                </td>
            </tr>
        </div>

        </tbody>
    </table>
</div>
<script>
    const app = new Vue({
        methods:{
            <!--查询动作-2  -->
            //获取列表
            getList(){
                axios.get('http://localhost:8080/vue_userinfo?op=ui_list').then(response=>{
                    // console.log(response);
                    if(response.status === 200){
                        this.info=response.data //   赋值给info
                    }
                })

            },
            //新增按钮事件,显示表单
            create(){
                this.isCreate = !this.isCreate
            },
            <!--增加动作-4 调用增加方法 -->
            //确认新增
            confirmCreate(){
                axios.post('http://localhost:8080/vue_userinfo?op=ui_save',this.newInfo).then(response=>{
                    // console.log("确认新增:"+this.newInfo.userName+"======");
                    //  console.log(response);
                    if(response.status === 200){
                        // console.log(response.data.ms);
                        this.getList()
                        // this.newInfo={
                        //         userId:'',
                        //         userMail:'',
                        //         userName:'',
                        //         userPhone:''
                        // }
                        this.isCreate = !this.isCreate //关闭显示表单
                        // alert('新增成功')
                    }
                })
            },
            <!--删除动作-2 删除按钮事件   -->
            //删除按钮事件
            deleteItem(index){
                if (confirm("您确定要执行此操作吗？")) {
                    axios.post('http://localhost:8080/vue_userinfo?op=ui_del',this.info[index]).then(response=>{
                        if(response.status===200){
                            this.getList()
                            //  alert('删除成功')
                        }
                    })
                } else {
                    alert('已取消删除')
                }

            },
            <!--修改动作-3 保存按钮事件 -->
            //保存按钮事件
            save(index){
                axios.post('http://localhost:8080/vue_userinfo?op=ui_upadte',this.info[index]).then(response=>{
                    if(response.status === 200){
                        //  console.log(response.data);
                        this.getList()
                        // alert('编辑成功')
                    }
                })
                this.thisIndex=''
            },
            removeEdit(){

            }
        },

        data(){
            return{
                <!--查询动作-3 info数据初始化集合对象 -->
                info: [],
                thisIndex:'',
                isCreate:false,
                <!--增加动作-2 newInfo来传递数据OOP -->
                newInfo:{
                    userId:'1001',
                    userMail:'111@qq.com',
                    userName:'矣三三',
                    userPhone:'1134567890'
                }
            }
        },
        <!--查询动作-5 调用方法-->
        mounted(){
            //Vue生命周期中第四个函数：该函数在执行过程中，已经将数据渲染到界面中，并且已经更新页面。
            this.getList()
        }
    })
    const vm = app.$mount("#app")
    console.log("-------------ok-----------------")
</script>
</body>
<style>
    .createNewUser{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .createNewUser input{
        border-radius: 10px;
        outline: none;
        border: 1px solid rgb(115, 115, 115);
    }
    .table tr td input{
        width: 150px;
    }
    .notedit{
        outline: none;
        border: none;
        background: transparent;
    }
    .isedit{
        outline:0;
        border: 1px solid rgb(160, 159, 159);
        border-radius: 5px;
    }
    .btn-group{
        display: flex;
    }
</style>
</html>